<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index04-箭头函数</title>
</head>

<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <script type="text/javascript">

        // 箭头函数的重点就是this，箭头函数中的this只看定义的位置
        let btn1 = document.getElementById("btn1");
        let btn2 = document.getElementById("btn2");

        // 绑定单击事件
        // btn1.onclick = function(){
        //     console.log(this);// btn1
        // };
        // btn2.onclick = () => {
        //     console.log(this); // window
        // };

        // 定义两个对象，分别在对象中定义函数,在对象中的函数中再定义箭头函数
        let person1 = {
            name: "张三",
            say: function() {
                btn1.onclick = function(){
                    console.log(this); // btn1
                };
            }
        };
        person1.say();
        let person2 = {
            name: "李四",
            say: function() {
                btn2.onclick = () => {
                    console.log(this); // person2
                };
            }
        };
        person2.say();

        // js中三种定义函数的方式
        // 1.函数表达式,存在一个自动提升
        // sayHello();
        // function sayHello(){
        //     console.log("方法一");
        // }
        // sayHello();
        // 2.函数声明，在js中要把函数当成一等公民，函数本身可以完成功能，也可以当值传递
        // f(); // 由于let没有自动提升，所以这里无法执行
        // let f = function(){
        //     console.log("方法二");
        // };
        // f();
        // 自执行函数(匿名函数(){函数体})()
        // (function(){
        //     console.log("自执行函数");
        // })();
        // 3.通过new来创建函数Function——构造函数F必须要大写
        /*
            new Function(参数1,参数2,...,参数n,指定的函数体);
            参数是给最后一个指定的函数体使用的，不是Function本身使用
         */
        // let f = new Function('x', 'y', 'return x + y')
        // let res = f(10, 20);
        // console.log(res);

        // 在js中函数可以重复定义，而且参数可以不同，后面的定义的函数会将前面定义的函数覆盖掉，但是名称要相同
        // function say(){
        //     console.log("say1");
        // }
        // 在js中如果调用方传递的参数和函数声明的函数的形参个数不相同时，如果获取其他的参数值
        // function say(x, y){
        //     // 在函数中有一个隐藏的对象，可以获取所有的参数arguments
        //     // arguments：可以接受所有的参数值，并且本身是一个数组，可以循环
        //     console.log(arguments);
        //     for (let i = 0; i < arguments.length; i++) {
        //         console.log(arguments[i]);

        //     }
        //     // console.log("say2-", x, y);
        // }
        // // say();
        // // say(10);
        // // say(10, 20);
        // say(10, 20, 30);
        // say(10, 20, 30, 100, 200);
        // 一个函数重要的是形参（接收参数）和函数体（进行业务的处理）
        // let fun = function(){
        //     console.log("我是箭头函数");
        // };
        // fun();
        // 箭头函数对普通函数的简化
        // let fun = () => { console.log("我是箭头函数"); };
        // let fun = () => console.log("我是箭头函数2");
        // fun();
        // 带一个参数的箭头函数
        // let fun = (a) => console.log(a);
        // fun(10);
        // 只有一个形参的情况下，()可以省略不写
        // let fun = a => console.log(a);
        // fun("hello");
        // 带有两个形参的箭头函数
        // let fun = (x, y) => console.log(x, y);
        // fun(10, 20);
        // let fun = (x, y) => {
        //     console.log(x, y);
        //     return x + y;
        // };
        // 如果箭头函数的函数体只有一行代码，并且有返回值，{}和return都可以省略不写
        // let fun = (x, y) => x + y;
        // let res = fun(10, 20);
        // console.log(res);
    </script>
</body>

</html>